Can someone please tell me why canvas.toDataURL() shows [object Promise]? I want to load a node-canvas image on my website with an image tag in HTML. Here is my code:
Handlebars.registerHelper('updateImage', async function (id, user) {
const welcome = new Keyv(`sqlite://data/welcome/${id}.sqlite`);
const bgimg = await welcome.get('canvas-join-bgimg') ? await welcome.get('canvas-join-bgimg') : `https://i.imgur.com/XMPcnz1.jpeg`;
const Canvas = require('canvas');
const background = await Canvas.loadImage(bgimg);
const avatardash = await Canvas.loadImage(user.displayAvatarURL({
dynamic: true,
size: 1024
}));
const canvas = Canvas.createCanvas(700, 250);
const context = canvas.getContext('2d');
context.drawImage(background, 0, 0, canvas.width, canvas.height);
return new Handlebars.SafeString(
'<img src='
' + canvas.toDataURL() + '
' />'
);
});
Sorry, but I'm still learning, and I do not see anything of this on the web.
EDIT: Here you can see the result on my website:

Any assistance would be greatly appreciated. Thank you.
It is because you have not yet awaited the promise, therefore the promise is unresolved.
Awaiting the promise is simple, simply add the await keyword:
return new Handlebars.SafeString(
`<img src="${await canvas.toDataURL()}">`
);
The above code is awaiting the promise and using template literals to avoid string concatenation.